<extend name="Public/base"/>
<block name="content">

    <form class="layui-form layui-form-pane1" action="" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">上传头像</label>
            <div class="layui-upload" style="margin-left: 110px;">
                <button type="button" class="layui-btn" id="upload">点击上传头像</button>
                <div class="layui-upload-list" id="pic"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" lay-verify="user" placeholder="请输入您的用户名" autocomplete="off"
                       class="layui-input"><span id="usermsg"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" lay-verify="pass" placeholder="请输入您的密码" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-block">
                <input type="tel" name="phone" lay-verify="phone" autocomplete="off" class="layui-input"
                       placeholder="请输入您的手机号码"><span
                    id="talmsg"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" lay-verify="email" autocomplete="off" class="layui-input"
                       placeholder="请输入您的邮箱"><span
                    id="emsg"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </div>
    </form>

</block>
<block name="js">
    <script>
        layui.use('upload', function () {
            var data = {};
            var $ = layui.jquery,
                upload = layui.upload;

            upload.render({
                elem: '#upload',
                url: "{:U('Admin/file')}",
                multiple: true,
                before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#pic').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                    });
                },
                done: function (res) {
                    //上传完毕
                    $('#pic').append('<input type="hidden" name="pic" value="' + res.data.fileName + '" />')
                }
            });

            $('input[name="username"]').blur(function () {

                data.username = $('input[name="username"]').val();
                if(data.username==''||data.username==null){
                    $('#usermsg').html('<font color="red">很抱歉！用户名不能为空</font>');
                    return false;
                }
                $.post("{:U('Admin/checkUsername')}", data, function (e) {
                    if (e.code == 1) {
                        $('#usermsg').html('<font color="green">恭喜你！用户名可以使用</font>');
                    } else {
                        $('#usermsg').html('<font color="red">很抱歉！该用户名不可使用哦</font>');
                    }
                });
            })
            $('input[name="phone"]').blur(function () {
                data.phone = $('input[name="phone"]').val();
                if(data.phone==''||data.phone==null){
                    $('#talmsg').html('<font color="red">很抱歉！号码不能为空</font>');
                    return false;
                }
                $.post("{:U('Admin/checkPhone')}", data, function (e) {
                    if (e.code == 1) {
                        $('#talmsg').html('<font color="green">恭喜你！该号码可以使用</font>');
                    } else {
                        $('#talmsg').html('<font color="red">很抱歉！该号码不可使用哦</font>');
                    }
                })

            })
            $('input[name="email"]').blur(function () {
                data.email = $('input[name="email"]').val();
                if(data.email==''||data.email==null){
                    $('#emsg').html('<font color="red">很抱歉！邮箱不能为空</font>');
                    return false;
                }
                $.post("{:U('Admin/checkEmail')}", data, function (e) {
                    if (e.code == 1) {
                        $('#emsg').html('<font color="green">恭喜你！该邮箱可以使用</font>');
                    } else {
                        $('#emsg').html('<font color="red">很抱歉！该邮箱不可使用哦</font>');
                    }
                })
            })
        });

    </script>
</block>